<div class="layui-fluid layui-anim febs-anim" id="business" lay-title="业务信息">
    <div class="febs-container layui-card">
        <div class="layui-col-md7 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <form class="layui-form" lay-filter="business-info-form" action="" id="business-info-form">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <div class="layui-inline">
                                    <label class="layui-form-label" >业务类型</label>
                                    <input type="radio" lay-filter="business-type" name="type" value="5" title="自有" checked>
                                    <input type="radio" lay-filter="business-type" name="type" value="4" title="第三方">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <div class="layui-inline">
                                    <label class="layui-form-label layui-form-label-sm">业务名称</label>
                                    <div class="layui-input-inline">
                                        <input type="text"  name="businessName" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain table-action" id="query-tree">
                                        <i class="layui-icon">&#xe848;</i>
                                    </div>
                                    <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-green-plain  table-action" id="query-reset">
                                        <i class="layui-icon">&#xe79b;</i>
                                    </div>
                                    <div class="layui-btn layui-btn-sm layui-btn-primary febs-button-blue-plain" id="close">
                                        <i class="layui-icon">&#xe795;</i>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div id="tree"></div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-col-md5 layui-col-sm6 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header" id="form-header">业务信息</div>
                <div class="layui-card-body febs-table-full">
                    <form class="layui-form layui-table-form" action="" lay-filter="business-form" id="business-form">
                        <div class="layui-form-item">
                            <label class="layui-form-label febs-form-item-require">业务名称：</label>
                            <div class="layui-input-block">
                                <input type="text" name="name" autocomplete="off" class="layui-input" minlength="1"
                                       lay-verify="range">
                            </div>
                        </div>
                        <div class="layui-form-item" id="module-belong">
                            <label class="layui-form-label febs-form-item-require">所属模块：</label>
                            <div class="layui-input-block">
                                <div id="select-module"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="layui-card-footer">
                    <button class="layui-btn" id="add" shiro:hasPermission="add:business">新增</button>
                    <button class="layui-btn" id="remove" style="background-color: red" shiro:hasPermission="delete:business">删除</button>
                    <button class="layui-btn" id="update" shiro:hasPermission="update:business">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script data-th-inline="none" type="text/javascript">
    layui.use(['laydate', 'jquery', 'laydate', 'febs', 'form', 'eleTree', 'table', 'validate', 'xmSelect', 'layer', 'upload', 'tree'], function () {
        let $ = layui.jquery,
            laydate = layui.laydate,
            febs = layui.febs,
            form = layui.form,
            xmSelect = layui.xmSelect,
            $view = $('#business'),
            $info = $view.find('#business-form'),
            $queryInfo = $view.find('#business-info-form'),
            $layer = layui.layer,
            tree = layui.tree,
            treeData = [],
            nowType = 5,
            nowData = {},
            moduleXmSelect,
            upload = layui.upload;

        moduleXmSelect = xmSelect.render({
            el: '#select-module',
            radio: true,
            clickClose: true,
            filterable: true,
            name: 'moduleId',
            model: {label: {type: 'text'}}
        })

        var tree1 = tree.render({
            id: 'businessTree',
            elem: '#tree',  //绑定元素
            // edit: ['add', 'update', 'del'],
            data: [],
            onlyIconControl: true,
            click: function(obj){
                nowData = obj.data
                form.val('business-form', {
                    name: nowData.name
                })
                if (nowData.moduleId !== undefined && nowData.moduleId !== null) {
                    moduleXmSelect.setValue([nowData.moduleId])
                } else {
                    moduleXmSelect.setValue([])
                }
                layer.closeAll();
                const editButton = document.getElementById('update');
                const removeButton = document.getElementById('remove');
                const moduleSelect = document.getElementById('module-belong')
                if (nowData.id < 0) {
                    editButton.style.display = 'none'
                    removeButton.style.display = 'none'
                } else {
                    editButton.style.display = ''
                    removeButton.style.display = ''
                }
                if (nowData.parentId === 0) {
                    moduleSelect.style.display = ''
                } else {
                    moduleSelect.style.display = 'none'
                }
                // console.log(obj.data); //得到当前点击的节点数据
                // console.log(obj.state); //得到当前节点的展开状态：open、close、normal
                // console.log(obj.elem); //得到当前节点元素
                // console.log(obj.data.children); //当前节点下是否有子节点
            }
        });

        febs.post(ctx + 'businessModule/listAll', null, function (result) {
            let res = result.data;
            let data = [];
            for (let i = 0; i < res.length; i++) {
                let e = {};
                e.value = res[i].id;
                e.name = res[i].moduleName;
                data[i] = e;
            }
            moduleXmSelect.update(
                {data: data}
            )
        })

        $view.find('#add').on('click', function () {
            if (nowData.id === undefined) {
                febs.alert.warn('请先选择父级业务!')
            } else {
                febs.modal.open('添加子业务', 'business/businessName', {
                    area: $(window).width() <= 750 ? '90%' : '50%',
                    closeBtn: 0,
                    maxmin: false,
                    btn: ['提交', '取消'],
                    yes: function (index, layero) {
                        let business = {type: nowType, name: document.getElementById('businessName').value, fatherId: nowData.id}
                        febs.post(ctx + 'business/add', business, function (res) {
                            if (res.code === 200) {
                                febs.alert.success('新增业务成功')
                            } else {
                                febs.alert.fail(res.message)
                            }
                            reload()
                        });
                        layer.closeAll();
                    },
                    btn2: function () {
                        layer.closeAll();
                    }
                });
            }
        })

        $view.find('#update').on('click', function () {
            if (nowData.id === undefined) {
                febs.alert.warn('请先选择业务!')
            } else if (nowData.id === 0) {
                febs.alert.warn('该业务不可修改!')
            } else {
                let data = $info.serializeJson()
                let business = {id: nowData.id, name: data.name, type: nowType, fatherId: nowData.parentId}
                if (nowData.parentId === 0) {
                    business.moduleId = data.moduleId
                }
                febs.post(ctx + 'business/update', business, function (res) {
                    if (res.code === 200) {
                        febs.alert.success('修改成功')
                    } else {
                        febs.alert.fail(res.message)
                    }
                    reload()
                });
                reset()
            }
        })

        $view.find('#remove').on('click', function () {
            if (nowData.id === undefined) {
                febs.alert.warn('请先选择业务!')
            } else if (nowData.id === 0) {
                febs.alert.warn('该业务不可删除!')
            } else {
                let business = {id: nowData.id, type: nowType}
                febs.post(ctx + 'business/remove', business, function (res) {
                    if (res.code === 200) {
                        febs.alert.success('删除成功')
                    } else {
                        febs.alert.fail(res.message)
                    }
                    reload()
                });
                reset()
            }
        })

        $view.find('#query-tree').on('click', function () {
            const data = $queryInfo.serializeJson();
            if (data.businessName !== '') {
                query()
            } else {
                reload()
            }
        })

        $view.find('#query-reset').on('click', function () {
            form.val('business-info-form', {
                type: nowType,
                businessName: ''
            })
            reload()
        })

        $view.find('#close').on('click', function () {
            treeData.forEach(e=>e.spread = false)
            tree.reload('businessTree', {
                data: treeData
            });
        })

        form.on('radio(business-type)', function (data) {
            nowType = data.value
            reload()
        })

        form.render();

        reload();

        function reset() {
            nowData = {}
            $info[0].reset()
            moduleXmSelect.setValue([])
        }

        function query() {
            const data = $queryInfo.serializeJson();
            febs.post(ctx + 'business/treeData', {type: nowType, name:data.businessName}, function (result) {
                treeData = result.data
                tree.reload('businessTree', {
                    data: treeData
                });
            })
        }

        function reload() {
            febs.post(ctx + 'business/treeData', {type: nowType, name: null}, function (result) {
                treeData = result.data
                tree.reload('businessTree', {
                    data: treeData
                });
            })
        }

    });
</script>